<template>
  <view class="nickName">
    <view style="padding: 0rpx 20rpx">
      <input
        :value="nickName"
        :maxlength="15"
        type="nickname"
        style="height: 100rpx"
        placeholder="请输入新的昵称"
        @blur="getNickName"
      ></input>
    </view>

    <BaseFootButton
      buttonText="保存"
      :btnStyle="{ color: '#FEFEFF', background: '#FF5900' }"
      @btnClick="sureAdd"
    ></BaseFootButton>
  </view>
</template>

<script>
import { mapActions } from 'vuex'
import pageMixin from '@/mixins/pageMixin'
import BaseFootButton from '@/components/BaseFootButton.vue'
export default {
  mixins: [pageMixin],
  components: {
    BaseFootButton,
  },
  data() {
    return { nickName: '' }
  },
  methods: {
    ...mapActions('user', ['updateInfo', 'GetUserInfo']),
    async sureAdd() {
      if(!this.nickName) return uni.$u.toast('昵称不能为空')
			this.$forceUpdate()
      // return
      // 修改信息
      const resData = await this.updateInfo({ nickName: this.nickName })
      if (resData.status == 200 && resData.data) {
        await this.GetUserInfo()
        uni.$u.toast('修改昵称成功!');
        uni.navigateBack()
      } else {
        uni.$u.toast('修改失败，请重试')
      }
    },
    getNickName(e) {
      this.nickName = e.detail.value
    }
  },
}
</script>

<style lang="scss" scoped>
.nickName {
  padding: 16rpx 0rpx;
}
</style>
